<template>
    <el-row>
        <div>
            <el-button type="info" @click="pushPermissions">管理员</el-button>
            <el-button type="info">添加管理员</el-button>
        </div>
       <div class="zhanghao clear">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="admin_account">
                    <el-input v-model="ruleForm.admin_account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="admin_pwd">
                    <el-input v-model="ruleForm.admin_pwd"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="admin_name">
                    <el-input v-model="ruleForm.admin_name"></el-input>
                </el-form-item>                     
                <el-form-item label="所属部门" prop="admin_depart">
                    <el-select v-model="ruleForm.admin_depart" placeholder="请选择部门">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="所属角色" prop="role_id">
                    <el-select v-model="ruleForm.role_id" placeholder="请选择角色">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话" prop="admin_phone">
                    <el-input v-model="ruleForm.admin_phone"></el-input>
                </el-form-item>
                <el-form-item label="一句话自述" prop="self_description">
                    <el-input type="textarea" v-model="ruleForm.self_description"></el-input>
                </el-form-item>
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload> 
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
       </div>    
    </el-row>
</template>

<script>
export default {
    name:'Administrator',
    data() {
        return {
          fileList: [{name: '', url: ''}],
          ruleForm: {
          admin_account: '',
          admin_pwd: '',
          admin_name: '',
          admin_depart: '',
          role_id: '',
          admin_phone: '',
          self_description: ''
        },
      };
    },
    methods: {
        pushPermissions(){
           this.$router.push({
               name:'权限设置',
               path:'/Home/Homemin/Permissions',
               query: {

                    },
          })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        }
    },
}
</script>

<style lang='less' scoped>
.zhanghao{
    padding: 2% 52% 2% 20%;
}

</style>